<template>
    <form class="forget-password-form" @submit="formSubmit">
        <!-- 手机号输入 -->
        <view class="form-item">
            <input
                class="form-input"
                v-model="formData.phone"
                placeholder="请输入手机号"
                @blur="validatePhone"
            />
            <text class="error-text" v-if="errors.phone">{{
                errors.phone
            }}</text>
        </view>

        <!-- 验证码输入 -->
        <view class="form-item">
            <input
                class="form-input"
                v-model="formData.verificationCode"
                placeholder="请输入验证码"
                @blur="validateverificationCode"
            />
            <button
                class="verify-code-btn"
                :disabled="verificationCodeBtnDisabled"
                @click="sendverificationCode"
            >
                {{ verificationCodeText }}
            </button>
        </view>

        <!-- 新密码输入 -->
        <view class="form-item">
            <input
                class="form-input"
                v-model="formData.newPassword"
                type="password"
                placeholder="请输入新密码"
                @blur="validateNewPassword"
            />
            <text class="error-text" v-if="errors.newPassword">{{
                errors.newPassword
            }}</text>
        </view>

        <!-- 确认新密码输入 -->
        <view class="form-item">
            <input
                class="form-input"
                v-model="formData.confirmPassword"
                type="password"
                placeholder="请确认新密码"
                @blur="validateConfirmPassword"
            />
            <text class="error-text" v-if="errors.confirmPassword">
                {{ errors.confirmPassword }}
            </text>
        </view>

        <!-- 操作按钮 -->
        <view class="form-actions">
            <button class="submit-btn" form-type="submit">修改密码</button>
            <button class="switch-btn" @click="switchToLogin">返回登录</button>
        </view>
    </form>
</template>

<script setup>
import { reactive, ref, defineEmits } from 'vue';
import { useLoginStore } from '../../../stores/loginStores';

const emit = defineEmits(['switch-form']);

const loginStore = useLoginStore();

// 表单数据
const formData = reactive({
    phone: '',
    verificationCode: '',
    newPassword: '',
    confirmPassword: ''
});

// 错误信息
const errors = reactive({
    phone: '',
    verificationCode: '',
    newPassword: '',
    confirmPassword: ''
});

// 验证码按钮状态
const verificationCodeBtnDisabled = ref(false);
const verificationCodeText = ref('发送验证码');

// 验证规则
const validateRules = {
    phone: (value) => {
        const phoneReg = /^1[3-9]\d{9}$/;
        if (!value) return '请输入手机号';
        if (!phoneReg.test(value)) {
            return '请输入有效的手机号';
        }
        return '';
    },
    verificationCode: (value) => {
        if (!value) return '请输入验证码';
        return '';
    },
    newPassword: (value) => {
        if (!value) return '请输入新密码';
        if (value.length < 6 || value.length > 20) {
            return '密码长度需为6-20位';
        }
        return '';
    },
    confirmPassword: (value) => {
        if (!value) return '请确认新密码';
        if (value !== formData.newPassword) {
            return '两次输入密码不一致';
        }
        return '';
    }
};

// 字段验证方法
const validatePhone = () => {
    errors.phone = validateRules.phone(formData.phone);
};
const validateverificationCode = () => {
    errors.verificationCode = validateRules.verificationCode(
        formData.verificationCode
    );
};
const validateNewPassword = () => {
    errors.newPassword = validateRules.newPassword(formData.newPassword);
};
const validateConfirmPassword = () => {
    errors.confirmPassword = validateRules.confirmPassword(
        formData.confirmPassword
    );
};

// 发送验证码
const sendverificationCode = () => {
    validatePhone();
    if (!errors.phone) {
        // 模拟发送验证码
        uni.showToast({
            title: '验证码已发送',
            icon: 'success'
        });
        // 倒计时
        let count = 60;
        verificationCodeBtnDisabled.value = true;
        verificationCodeText.value = `${count}秒后重发`;
        const timer = setInterval(() => {
            count--;
            verificationCodeText.value = `${count}秒后重发`;
            if (count <= 0) {
                clearInterval(timer);
                verificationCodeBtnDisabled.value = false;
                verificationCodeText.value = '发送验证码';
            }
        }, 1000);
    }
};

// 表单提交
const formSubmit = () => {
    validatePhone();
    validateverificationCode();
    validateNewPassword();
    validateConfirmPassword();

    const hasErrors = Object.values(errors).some((msg) => msg !== '');

    if (!hasErrors) {
        loginStore
            .userForgetPassword({
                phone: formData.phone,
                verificationCode: formData.verificationCode,
                newPassword: formData.newPassword
            })
            .then((res) => {
                if (res.data.code === 20000) {
                    uni.showToast({
                        title: '密码修改成功',
                        icon: 'success'
                    });
                    switchToLogin();
                } else {
                    uni.showToast({
                        title: res.data.message,
                        icon: 'none'
                    });
                }
            });
    } else {
        return false;
    }
};

// 返回登录
const switchToLogin = () => {
    emit('switch-form', 'login');
};
</script>

<style lang="scss" scoped>
.forget-password-form {
    padding: 0 60rpx;
    // 输入框部分
    .form-item {
        margin-bottom: 40rpx;
        height: 90rpx;
        position: relative;

        .form-input {
            height: $han-input-height-sm;
            margin: 0 60rpx;
            padding: 0 20rpx;
            border-radius: 50rpx;
            border: 1px solid $han-global-border-color;
            box-sizing: border-box;
        }

        .error-text {
            color: $han-danger-color;
            font-size: $han-font-size-xs;
            padding-left: 100rpx;
            margin-top: 10rpx;
            display: block;
        }

        .verify-code-btn {
            position: absolute;
            right: 60rpx;
            top: 0;
            height: $han-input-height-sm;
            width: 200rpx;
            line-height: $han-input-height-sm;
            font-size: $han-font-size-base;
            color: $han-primary-color;
            background: none;
            border: none;
            border-top-right-radius: 50rpx;
            border-bottom-right-radius: 50rpx;
        }
    }

    // 按钮部分
    .form-actions {
        margin: 30rpx 60rpx;

        button {
            height: $han-button-height-sm;
            line-height: $han-button-height-sm;
            border-radius: $han-font-size-base;
            font-size: $han-font-size-base;
            margin-bottom: 30rpx;
            width: 100%;
        }

        .submit-btn {
            background: $han-primary-color;
            color: #f7f7f7;
        }

        .switch-btn {
            background: none;
            border: 1px solid $han-global-border-color;
            color: $han-global-secondary-font-color;
        }
    }
}
</style>
